// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;

// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components. 
$modules: () !default;
@mixin exports($name) {
  $module_index: index($modules, $name);
  @if (($module_index == null) or ($module_index == false)) {
    $modules: append($modules, $name);
    @content;
  }
}

//
// @functions
//


// RANGES
// We use these functions to define ranges for various things, like media queries. 
@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

// STRIP UNIT
// It strips the unit of measure and returns it
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// CONVERT TO REM
@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

@function data($attr) {
  @if $namespace {
    @return '[data-' + $namespace + '-' + $attr + ']';
  }

  @return '[data-' + $attr + ']';
}

// REM CALC 

// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
// 
//   rem-calc(10 20 30px 40);
// 
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
// 
//   rem-calc((10, 20, 30, 40px));
// 
// Optionally call with a different base (eg: 8px) to calculate rem.
// 
//   rem-calc(16px 32px 48px, 8px);
// 
// If you require to comma separate your list
// 
//   rem-calc((16px, 32px, 48), 8px);

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);

  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function emCalc($values){
  @return rem-calc($values);
}

// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function em-calc($values){
  @return rem-calc($values);
}

//vm
$max-breakpoint:750;
// This could be one of your media query breakpoint variables
$wide-screen: "(min-width: #{$max-breakpoint}px)";

// Function
@function get-vw($target) {
  // 1 vw is equal to 1% of the viewport width
  $vw-context: ($max-breakpoint * .01) * 1px; // 1% viewport width
  @return ($target/$vw-context) * 1vw;
}

// Mixin
@mixin vw($size) {
  font-size: get-vw($size);
  // Prevent font-size from getting too big
  @media #{$wide-screen} {
    font-size: $size;
  }
}


// If the width of the viewport is 1025px or wider, the font size will remain at 72px. Otherwise, the value will adjust as 7.2vw.
// .headline {
//   font-size: 4.5em; // Fallback
//   @include vw(72px);
// }

@function pxToRem($value, $base:750) {
  @if unit($value) == "px" or unit($value) == "" {
    @return (strip-unit($value) / ($base / 10)) * 1rem;
  }@else {
    @return $value;
  }
}

/***** add by duanwanyu ******/
//icon
@mixin tick($width,$height,$border-width,$border-color,$rotate,$translateX,$translateY){
  width: $width;
  height: $height;
  border-top: $border-width solid $border-color;
  border-left: $border-width solid $border-color;
  transform: rotate($rotate) translate3d($translateX,$translateY,0);
  -ms-transform: rotate($rotate) translate3d($translateX,$translateY,0); /* IE 9 */
  -webkit-transform: rotate($rotate) translate3d($translateX,$translateY,0);/* Safari and Chrome */
  -o-transform: rotate($rotate) translate3d($translateX,$translateY,0);/* Opera */
  -moz-transform: rotate($rotate) translate3d($translateX,$translateY,0);
}
@function px2rem($px){
  @return $px / 75 * 1rem;
}

@mixin setFont($header, $size) {
  #{$header} {
    font-size: px2rem($size);
  }
}
@mixin translate($translateX,$translateY) {
  transform: translate3d($translateX,$translateY,0);
  -ms-transform: translate3d($translateX,$translateY,0); /* IE 9 */
  -webkit-transform: translate3d($translateX,$translateY,0);/* Safari and Chrome */
  -o-transform: translate3d($translateX,$translateY,0);/* Opera */
  -moz-transform: translate3d($translateX,$translateY,0);
}